<template>
  <div class="site-chart-box-main">
    <van-nav-bar safe-area-inset-top placeholder :title="siteName" left-arrow fixed @click-left="onClickLeft" />
    <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
      <div id="EVChart"></div>
    </van-pull-refresh>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data(){
    return {
      siteName:localStorage.getItem('siteName'),
      isLoading:false,
      fifteenRefresh:null
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/main/sitedetail'});
    },
    //获取充电桩功率
    async getEVDatas(){
      this.comm.loadingShow();
      let data=await this.API.getSiteEVTotalChargePower(localStorage.getItem('domain'),
        {'tokenId':localStorage.getItem('tokenId'),
        'siteId':localStorage.getItem('siteId'),
        'time':moment(new Date()).format('YYYY-MM-DD')
        });
        let [times,power]=[[],[]];
      for(let i= 0;i<data.length;i++){
        let arrs=(data[i].uploadTime).split(' ');
        arrs=arrs[arrs.length-1];
        arrs=arrs.split(":");
        arrs=arrs.slice(0,2);
        arrs=arrs.join(":");
        times.push(arrs);
        power.push(((data[i].totalChargePower||0)).toFixed(1));
      }
      let legend=[this.$t('EVCharger')];
      let series=[
        {name: legend[0],type: 'line',symbol: 'none',smooth: true,itemStyle: {normal: {color: '#F4B600'}},data: power}];
      this.commChart.lineChart2('EVChart',times,legend,series);
    },
    onRefresh(){
      this.isLoading=false;
      this.getYielCharts(this.timeNameCode,...this.dataCurrent,this.yieldNameCode);
      this.getEVDatas();
    },
  },
  mounted(){
    this.getEVDatas();
    this.fifteenRefresh=setInterval(()=>{
      this.getEVDatas();
    },900000);
  },
  destroyed(){
    clearInterval(this.fifteenRefresh);
    this.fifteenRefresh=null;
  }
}
</script>

<style scoped lang="less">
.van-hairline--bottom::after{
  border: none;
}
#EVChart{
  width: 100%;
  height: 280px;
  margin-top: 15px;
}
</style>
